<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>我的收货地址</title>
    <link href="../css.min/mui.min.css" rel="stylesheet"/>
    <link rel="stylesheet" href="../css/header.css" />
    <link rel="stylesheet" href="../css/common.css" />
    <style>
	    .add{margin-top: 10px;height: 50px;font-size: 18px;line-height: 40px; }
	   	.add a{color:#FA435E;font-weight: bold;display: block;}
	   	.contact-left{width: 90%;}
	   	.contact-right{width: 10%;}
	   	.mui-table-view-radio .mui-table-view-cell .mui-navigate-right:after{color: #EE4B62;}
	   	.mui-table-view-radio .mui-table-view-cell{padding-right: 0px;}
	   	.contact-name{color: #000000;font-weight: bold;font-style: oblique;}
	   	.contact-phone{margin-left: 10px;}
    </style>
</head>
<body>
	<header class="mui-bar mui-bar-nav">
	    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
	    <h1 class="mui-title">我的收货地址</h1>
	</header>
	<div class="mui-content">
		<p id="add" class="mui-table-view-divider mui-text-center add"><a>+新增收货地址</a></p>
		<ul id="tableview" class="mui-table-view mui-table-view-radio">
			<!--<li class="mui-table-view-cell">
							<div class="mui-table">
								<div class="mui-table-cell contact-left">
									<a class="contact-name">杨胜飞</a>
									<span class="mui-ellipsis contact-phone">1989323989</span>
									<p class="contact-address mui-ellipsis-2">地址地址加大飒飒大声讲课大赛将扩大四季度</p>
								</div>
								<div class="mui-table-cell contact-right">
									<a class="mui-navigate-right">									
									</a>
								</div>
							</div>
			</li>-->
			<!--<li class="mui-table-view-cell mui-disabled">
							<div class="mui-table">
								<div class="mui-table-cell contact-left">
									<a id="contact-name">杨胜飞</a>
									<h5 id="contact-phone" class="mui-ellipsis">1989323989</h5>
									<p id="contact-address" class="mui-ellipsis-2">地址地址加大飒飒大声讲课大赛将扩大四季度</p>
								</div>
								<div class="mui-table-cell contact-right mui-text-right">
									<a class="imgpreview-close mui-icon mui-icon-closeempty"></a>
								</div>
							</div>
			</li>-->
		</ul>
	</div>
</body>
<script src="../js.min/mui.min.js"></script>
<script type="text/javascript" src="../js/config.js" ></script>
<script type="text/javascript" src="../js/utils.js" ></script>
<script type="text/javascript" src="../js/cache.js" ></script>
<script type="text/javascript" charset="utf-8">
    mui.init();
    
    var addLink=null,tableviewUl=null;
    document.addEventListener("DOMContentLoaded",function(){
    	addLink=document.getElementById("add");
    	tableviewUl=document.getElementById("tableview");
    	
    	//新增
    	addLink.addEventListener('tap',function(){
    		utils.openWindow("create_address","cret_address.html","slide-in-right",
    		300,false);
    	});
    	
    	var ul=document.querySelector('.mui-table-view.mui-table-view-radio');
    	ul.addEventListener('selected',function(e){
    		var ee=this;
			var el=e.detail.el;
			ee.name=el.querySelector('.contact-name').innerText;
			ee.phone=el.querySelector('.contact-phone').innerText;
			ee.address=el.querySelector('.contact-address').innerText;
			
			mui.fire(plus.webview.currentWebview().opener(),"UpdateAddress",
			{name:ee.name,phone:ee.phone,address:ee.address});
			
		});
    	
    });
    
    /**
     * h5+ ready
     */
    mui.plusReady(function(){
    	getAddressList();
    	
    });
    
    /**
     * 
     */
    window.addEventListener("RefreshPage",function(e){
    	getAddressList();
    });
    
    /**
     * 
     * @param {Object} n
     * @param {Object} p
     * @param {Object} a
     */
    function createcell(n,p,a){
    	var li=document.createElement("li");
    	li.className="mui-table-view-cell";
    	
    	var table=document.createElement("div");
    	table.className="mui-table";
    	
    	var cellleft=document.createElement("div");
    	cellleft.className="mui-table-cell contact-left";
    	var name=document.createElement("a");
    	name.className="contact-name";
    	name.innerHTML=n;
    	var phone=document.createElement("span");
    	phone.className="mui-ellipsis contact-phone";
    	phone.innerHTML=p;
    	var address=document.createElement("p");
    	address.className="contact-address mui-ellipsis-2";
    	address.innerHTML=a;
    	
    	cellleft.appendChild(name);
    	cellleft.appendChild(phone);
    	cellleft.appendChild(address);
    	
    	var cellright=document.createElement("div");
    	cellright.className="mui-table-cell contact-right";
    	var aa=document.createElement("a");
    	aa.className="mui-navigate-right";
    	
    	cellright.appendChild(aa);
    	
    	table.appendChild(cellleft);
    	table.appendChild(cellright);
    	
    	li.appendChild(table);
    	
    	return li;
    	
    }
    
    /**
     * 
     */
    function getAddressList(){
    	if(CACHE.Login()=="true" && CACHE.UserName()){
    		var e=this;
    		
    		e.wa=plus.nativeUI.showWaiting();
    		mui.ajax_query("getContacts!PPH",{userName:CACHE.UserName()},
    		function(data){
    			e.wa.close();
    			if(!data) return mui.toast("加载收货地址列表出错了");
    			if(data.length<1) return mui.alert("您还没有填写过地址哦");
    			
    			tableviewUl.innerHTML="";
    			for (var i = 0; i < data.length; i++) {
    				var v=data[i];
    				tableviewUl.appendChild(createcell(v.Contact_Name,v.Contact_Phone,v.Contact_Address));
    			}
    			
    		},
    		function(c,m){
    			e.wa.close();
    			mui.toast("加载收货地址列表失败了");
    		});
    		
    	}else{
    		utils.openWindow("login","login.html","slide-in-right",300,false);
    	}
    }
    	
</script>
</html>